import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

const _APP_BAR_OFFSET_MAX = 100.0;

class ListViewPage extends StatefulWidget {
  final Map<String, dynamic> arguments;
  ListViewPage({Key key, this.arguments}) : super(key: key);

  @override
  _ListViewPageState createState() => _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {
  
  final List<String> _imgUrls = [
    'http://hiphotos.qianqian.com/ting/pic/item/838ba61ea8d3fd1fb4912e42354e251f95ca5f2a.jpg',
    'http://hiphotos.qianqian.com/ting/pic/item/b3119313b07eca80b93485cf932397dda14483e1.jpg',
    'http://hiphotos.qianqian.com/ting/pic/item/eac4b74543a9822659d378408982b9014a90eb43.jpg',
  ];

  double _appBarOpacity = 0.0;

  /// 监听列表滚动
  _didScroll(double offset) {
    print('offset: $offset');

    var opacity = offset / _APP_BAR_OFFSET_MAX;
    if (opacity < 0.0) {
      opacity = 0.0;
    } else if (opacity > 1.0) {
      opacity = 1.0;
    }

    setState(() {
      this._appBarOpacity = opacity;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          MediaQuery.removePadding(
            removeTop: true,
            removeBottom: true,
            context: context,
            // 监听滚动 (注: 包括 ListView 内部的子 Widget 滚动也将会监听到)
            child: NotificationListener(
              child: ListView(
                children: <Widget>[
                  Container(
                    height: 160.0,
                    child: Swiper(
                      autoplay: true,
                      itemCount: this._imgUrls.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Image.network(this._imgUrls[index], fit: BoxFit.cover);
                      },
                      pagination: SwiperPagination(),
                    ),
                  ),
                  ExpansionTile(
                    title: Text('aaa'),
                    children: <Widget>[
                      Text('a'),
                      Text('a'),
                      Text('a'),
                      Text('a'),
                      Text('a'),
                    ],
                  ),
                  ExpansionTile(
                    title: Text('bbb'),
                    children: <Widget>[
                      Text('b'),
                      Text('b'),
                      Text('b'),
                      Text('b'),
                      Text('b'),
                    ],
                  ),
                ],
              ),
              onNotification: (notification) {
                // 滚动通知 且 深度为 0(第一个元素)
                if (notification is ScrollUpdateNotification && notification.depth == 0) {
                  final pixels = notification.metrics.pixels;
                  this._didScroll(pixels);
                } else {}
                return true;
              },
            ),
          ),
          Opacity(
            opacity: this._appBarOpacity,
            child: _AppBar(
              backClick: () {
                if (this._appBarOpacity > 0.0) {
                  Navigator.pop(context);
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}

class _AppBar extends StatelessWidget {
  final VoidCallback backClick;
  const _AppBar({Key key, this.backClick}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).padding.top + 44.0,
      width: double.infinity,
      alignment: Alignment.bottomCenter,
      color: Colors.blue,
      child: Container(
        height: 44.0,
        child: Row(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.arrow_back_ios, color: Colors.white),
              onPressed: () {
                backClick();
              },
            ),
            Expanded(
              child: Center(
                child: Text('ListViewPage'),
              ),
            ),
            IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
            IconButton(icon: Icon(Icons.share), onPressed: () {}),
          ],
        ),
      ),
    );
  }
}
